<template>
	<div class="alert-echart-box">
		<div class="box-title">
			告警信息情况
		</div>
		<div class="situation-box">
			<div class="situation-box-item">
				<div class="fs-12">已录入地址</div>
				<div class="fs-24" style="color: #12fee5;">{{deviceInfo.addressCount}}
				</div>
			</div>
			<div class="situation-box-item">
				<div class="fs-12">已安装设备</div>
				<div class="fs-24" style="color: #ebad35;">{{deviceInfo.deviceCount}}
				</div>
			</div>
			<div class="situation-box-item">
				<div class="fs-12">告警统计</div>
				<div class="fs-24" style="color: #00eaf6;">{{deviceInfo.alertCount}}</div>
			</div>
		</div>
		<div class="bar-box">
			<div ref="alertBar" id="alert-bar"></div>
		</div>
	</div>
</template>

<script>
	
	import * as echarts from 'echarts';
	import {
		mapState
	} from "vuex";
	import API from '@/api/index.js'

	export default {
		data() {
			return {
				deviceInfo: {
					addressCount: '1',
					deviceCount: '2',
					alertCount: '1'
				}
			}
		},

		mounted() {
			this.getData();
			// this.initHeartChart();
		},
		methods: {
			initEChart() {
				let self = this;
				self.alertBar = echarts.init(self.$refs.alertBar);
				self.option = {
					title: {
						text: '负荷警报',
						left: 'center',
						top: '0',
						textStyle: {
							color: '#ffffff',
							fontSize: '14',
						}
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						top: 20,
						bottom: 20,
						left: 20,
						right: 10
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['1月', '2月', '3月', '4月', '5月', '6月'],
						axisLine: {
							show: true,
							lineStyle: {
								color: '#01cdd7'
							}
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: true, // X轴线 颜色类型的修改
							lineStyle: {
								color: '#042d3d'
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#01cdd7'
							}
						}
					},
					series: [{
							name: 'Video Ads',
							type: 'line',
							itemStyle: {
								color: '#02dfee'
							},
							areaStyle: {
								color: {
									type: 'line',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#02dfee' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#061329' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							data: [1, 2, 3, 4, 3, 2, 1],
							smooth: true
						},
						{
							name: 'Direct',
							type: 'line',
							itemStyle: {
								color: '#14f5d7'
							},
							areaStyle: {
								color: {
									type: 'line',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#14f5d7' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#061329' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							data: [1, 3, 2, 4, 6, 4],
							smooth: true
						},
						{
							name: 'Search Engine',
							type: 'line',
							itemStyle: {
								color: '#d8a136'
							},
							areaStyle: {
								color: {
									type: 'line',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#d8a136' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#061329' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							data: [2, 1, 3, 5, 4, 1],
							smooth: true
						}
					]
				}

				self.alertBar.setOption(self.option);

				window.onresize = () => {
					setTimeout(() => {
						self.alertBar.resize()
					})
				}
			},
			// 获取后台的统计数据
			getData() {
				let self = this;
				API.deviceCountData().then(res => {
					self.deviceInfo = res.data.data;
					this.initEChart()
					this.$nextTick(() => {
						this.initEChart();
					})
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style>
</style>
